<template>
  <div>
    <el-steps
      :active="2"
      process-status="wait"
      align-center
      style="margin-bottom: 40px"
    >
      <el-step title="填写视频汇总信息"></el-step>
      <el-step title="填写视频信息"></el-step>
    </el-steps>
    <el-table :data="videoInfos" row-key="id" style="width: 100%">
      <el-table-column label="视频名称" prop="videoName"> </el-table-column>
      <el-table-column align="center" label="操作" width="250">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="openEdit(scope.row.id)"
          />
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="deleteVideoInfo(scope.row.id)"
          />
        </template>
      </el-table-column>
    </el-table>
    <nav style="text-align: center">
          <el-pagination
            background
            @current-change="handlePageChange"
            :current-page="pageNo"
            :page-size="pageSize"
            layout="prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </nav>
    <div class="btn_group">
      <el-button type="primary" @click="openAdd()">新增视频</el-button>
      <!-- Form -->
      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
        <el-form :model="videoInfo">
          <el-form-item label="视频名" prop="videoName">
            <el-input v-model="videoInfo.videoName"></el-input>
          </el-form-item>
          <el-form-item label="视频作者" prop="videoAuthor">
            <el-input v-model="videoInfo.videoAuthor"></el-input>
          </el-form-item>
          <el-form-item class="myuploader" label="视频封面" prop="videoImg">
            <el-upload
              ref="uploader_img"
              class="upload-demo"
              :on-change="handleImgChange"
              :action="uploadUrl"
              :file-list="imgList"
              :multiple="false"
              :auto-upload="false"
              list-type="picture"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="视频简介" prop="videoInfo">
            <el-input v-model="videoInfo.videoInfo"></el-input>
          </el-form-item>
          <el-form-item label="视频描述" prop="videoRemarks">
            <el-input v-model="videoInfo.videoRemarks"></el-input>
          </el-form-item>
          <el-form-item class="myuploader" label="视频文件" prop="videoUrl">
            <el-upload
              ref="uploader_file"
              class="upload-demo"
              :on-change="handleFileChange"
              :action="uploadUrl"
              :file-list="fileList"
              :multiple="false"
              :auto-upload="false"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="显示排序" prop="orderNum">
            <el-input-number
              v-model="videoInfo.orderNum"
              :min="1"
              :max="999"
              label="排序号"
            ></el-input-number>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveOrUpdate()">确 定</el-button>
        </div>
      </el-dialog>
      <el-button @click="finish()">完成</el-button>
    </div>
  </div>
</template>
<script>
import {
  getVideoInfoApi,
  getVideoInfosApi,
  addVideoInfoApi,
  updateVideoInfoApi,
  delVideoInfoApi,
} from "@/api/videoInfo";
export default {
  data() {
    return {
      dialogTitle: "",
      option: "",
      dialogVisible: false,
      changeImg: false,
      changeFile: false,
      imgList: [],
      fileList: [],
      imgPath: process.env.VUE_APP_BASE_API,
      uploadUrl: "",
      videoId: 0,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      videoInfo: {
        userId: 1,
        orderNum: 1,
      },
      videoInfos: [],
    };
  },
  created() {
    if (this.$route.params.id) {
      this.videoId = this.$route.params.id;
    }
    this.getVideoInfos();
  },
  methods: {
    getVideoInfo(id) {
      getVideoInfoApi(id).then((response) => {
        this.videoInfo = response.data;
        this.imgList = [
          {
            name: this.videoInfo.videoImg.substring(
              this.videoInfo.videoImg.lastIndexOf("/") + 1
            ),
            url: this.imgPath + this.videoInfo.videoImg,
            status: "ready",
          },
        ];
        this.fileList = [
          {
            name: this.videoInfo.videoUrl.substring(
              this.videoInfo.videoUrl.lastIndexOf("/") + 1
            ),
            status: "ready",
          },
        ];
      });
    },
    getVideoInfos() {
      this.listLoading = true
      getVideoInfosApi(this.videoId, this.pageNo, this.pageSize).then(
        (response) => {
          this.videoInfos = response.data.list;
          this.pageNo = response.data.pageNum
          this.total = response.data.total
          this.listLoading = false
        }
      );
    },
    handlePageChange(currentPage) {
      this.pageNo = currentPage;
      this.getVideos(this.pageNo, this.pageSize, this.video);
    },
    openAdd() {
      this.clearDialog();
      this.videoInfo.videoId = this.videoId;
      this.dialogTitle = "新增视频";
      this.option = "add";
      this.dialogVisible = true;
    },
    openEdit(id) {
      this.clearDialog();
      this.getVideoInfo(id);
      this.dialogTitle = "编辑视频";
      this.option = "edit";
      this.dialogVisible = true;
    },
    clearDialog() {
      this.changeImg = false;
      this.changeFile = false;
      this.imgList = [];
      this.fileList = [];
      this.videoInfo = {
        userId: 1,
        orderNum: 1,
      };
    },
    finish() {
      this.$router.push("/content/video");
    },
    saveOrUpdate() {
      /**在此表单校验*/
      if (this.option == "add") {
        this.addVideoInfo();
      } else if (this.option == "edit") {
        this.updateVideoInfo();
      }
    },
    updateVideoInfo() {
      const form = new FormData();
      Object.keys(this.videoInfo).forEach((key) => {
        form.append(key, this.videoInfo[key]);
      });
      form.delete("createTime");
      if (this.changeImg) {
        form.append("image", this.imgList[0].raw);
      }
      if (this.changeFile) {
        form.append("file", this.fileList[0].raw);
      }
      updateVideoInfoApi(form).then((response) => {
        if (response.status == 0) {
          this.$message("提交成功");
        }
        this.dialogVisible = false;
        this.getVideoInfos();
      });
    },
    addVideoInfo() {
      const form = new FormData();
      Object.keys(this.videoInfo).forEach((key) => {
        form.append(key, this.videoInfo[key]);
      });
      if (this.fileList.length == 0 || this.imgList.length == 0) {
        this.$message("请选择封面和视频文件");
        return;
      }
      form.append("image", this.imgList[0].raw);
      form.append("file", this.fileList[0].raw);
      addVideoInfoApi(form).then((response) => {
        if (response.status == 0) {
          this.$message("提交成功");
        }
        this.dialogVisible = false;
        this.getVideoInfos();
      });
    },
    deleteVideoInfo(id) {
      delVideoInfoApi(id).then((response) => {
        if (response.status == 0) {
          this.$message("删除成功");
        }
        this.getVideoInfos();
      });
    },
    handleFileChange(file, fileList) {
      const isMp4 = file.raw.type === "video/mp4";
      const isLt100M = file.raw.size / 1024 / 1024 < 100;
      if (fileList.length > 0) {
        //单个覆盖上传
        this.fileList = [fileList[fileList.length - 1]];
        if (!isMp4) {
          this.$message.error("上传文件只能是 MP4 格式!");
          this.fileList = [];
          return false;
        } else if (!isLt100M) {
          this.$message.error("上传文件大小不能超过 2M!");
          this.fileList = [];
          return false;
        }
        this.changeFile = true;
        return true;
      }
    },
    handleImgChange(file, fileList) {
      const isPNG = file.raw.type === "image/png";
      const isLt2M = file.raw.size / 1024 / 1024 < 0.5;
      if (fileList.length > 0) {
        //单个覆盖上传
        this.imgList = [fileList[fileList.length - 1]];
        if (!isPNG) {
          this.$message.error("上传图片只能是 PNG 格式!");
          this.imgList = [];
          return false;
        } else if (!isLt2M) {
          this.$message.error("上传图片大小不能超过 500kb!");
          this.imgList = [];
          return false;
        }
        this.changeImg = true;
        return true;
      }
    },
  },
};
</script>
<style scoped>
.btn_group {
  margin-top: 50px;
  text-align: center;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.myuploader >>> .el-list-enter-active,
.myuploader >>> .el-list-leave-active {
  transition: none;
}
.myuploader >>> .el-list-enter,
.myuploader >>> .el-list-leave-active {
  opacity: 0;
}
</style>